<template>
  <div>
    <van-popup :visible.sync="item.dialogData.visible" v-for="(item, index) in dialogList" @closed="dialogRemove(item)">
          <span style="float:left;">
                        <span>{{ item.dialogData.title }}</span>
                    </span>
      <van-nav-bar
          :title=item.dialogData.title
          left-arrow
      />
      <div id="mIframe" class="dialog_frame" frameborder="0">
        <slot></slot>
        <elm-component :component-name="item.dialogData.src"></elm-component>
      </div>

    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      component: null,
      dialogList: [],
    }
  },
  mounted() {
    //拦截浏览器的退回操作，优先退回弹出层
    window.history.pushState(null, null, "");
    if (window.history && window.history.pushState) {
      window.onpopstate = function () {
        if (elm.dialog.vue.dialogList.length > 0) {
          elm.dialog.vue.dialogRemove(elm.dialog.vue.dialogList[elm.dialog.vue.dialogList.length - 1]);
        }
        window.history.pushState(null, null, "");
      };
    }

    elm.dialog.vue = this;
  },
  methods: {
    /*
    * 打开弹窗
    * @data 弹窗数据
    */
    open: function (data) {
      let open_item = {
        dialogData: {
          id: "1", //ID标识
          title: "",//标题
          visible: true,//是否显示
          src: "",//子框架加载的页面地址
          width: "80%",//弹窗宽度
          height: "600px",//弹窗高度
          fullscreen: false,//是否全屏显示
          top: "8vh",//顶距
          modalClose: false,//是否在点击遮罩时关闭
          tempHeight: '',//储存原有的高度，用于取消全屏显示后的恢复
          info: null,//信息
          head: {
            height: "40px",
            color: "#fff",
            backgroundColor: "#fff",
            backgroundImage: " linear-gradient(to right, #57a8ff, #185587);",
            icon: '',
            top: "5px",
            subTitle: null,
            activeColor: "#ccc",
            spani: {
              20: {
                class: "btbtn close", click: function (item) {
                  elm.dialog.vue.dialogRemove(item);
                }
              },
            },
            showhead: true //显示标题栏
          }
        }
      };
      for (var p in data) {
        if (p == "head") {
          for (var hp in data[p]) {
            if (hp == "spani") {
              for (var hp_i in data[p][hp]) {
                open_item.dialogData[p][hp][hp_i] = data[p][hp][hp_i];
              }
            } else if (hp == "theme") {
              if (data[p][hp] == "white") {
                open_item.dialogData[p]["spani"]["20"]["class"] = "btbtn close-light";
              }
            } else {
              open_item.dialogData[p][hp] = data[p][hp];
            }
          }
        } else {
          open_item.dialogData[p] = data[p];
        }
      }
      open_item.dialogData.tempHeight = open_item.dialogData.height;
      elm.dialog.vue.dialogList.push(open_item);
    },
    /*
     * 获取弹窗对象
     * @id 弹窗id
     */
    GetFrame: function (id) {
      if (!id) {
        return this.dialogList[this.dialogList.length - 1];
      }
      for (var i = 0; i < this.dialogList.length; i++) {
        if (this.dialogList[i].dialogData.id == id) {
          return this.dialogList[i];
        }
      }
    },

    /*
    * 弹窗关闭时
    * @item 弹窗数据
    */
    dialogRemove: function (item) {
      for (var i = 0; i < this.dialogList.length; i++) {
        if (this.dialogList[i] == item) {
          this.dialogList.splice(i, 1);
        }
      }
    },
  }
};
</script>